﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="jQuery_BetterSelect_Default" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery - Better select elemnts</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <div id="page">
        <h1>
            Your product</h1>
        <select name="fancySelect" class="makeMeFancy">
            <option value="0" selected="selected" data-skip="1">Choose Your Product</option>
            <option value="1" data-icon="img/products/iphone.png" data-html-text="iPhone 4&lt;i&gt;in stock&lt;/i&gt;">
                iPhone 4</option>
            <option value="2" data-icon="img/products/ipod.png" data-html-text="iPod &lt;i&gt;in stock&lt;/i&gt;">
                iPod</option>
            <option value="3" data-icon="img/products/air.png" data-html-text="MacBook Air&lt;i&gt;out of stock&lt;/i&gt;">
                MacBook Air</option>
            <option value="4" data-icon="img/products/imac.png" data-html-text="iMac Station&lt;i&gt;in stock&lt;/i&gt;">
                iMac Station</option>
        </select>
        <select>
            <option value="0" selected="selected" data-skip="1">Choose Your Product</option>
            <option value="1" data-html-text='Test'>Test</option>
        </select>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="script.js"></script>
    <div id="footer">
        <div class="tri">
        </div>
        <h1>
            Better Select Elements with jQuery and CSS3</h1>
        <a class="tzine" href="http://tutorialzine.com/2010/11/better-select-jquery-css3/">Read
            &amp; Download on</a>
    </div>
</body>
</html>
